<template>
    <div class="c-ticket__search">
        <Row :gutter="30" class="margin-bottom-10" type="flex">
            <!-- <i-col class="c-ticket__row" span="6">
                <span class="c-ticket__label">商户名称</span>
                <div class="c-ticket__item">
                    <Select
                        :loading="loadingClients"
                        :remote-method="handleSearchClients"
                        clearable
                        filterable
                        placeholder="请输入商户手机号/名称搜索"
                        remote
                        v-model="param.client"
                    >
                        <Option
                            :key="index"
                            :value="option.id"
                            v-for="(option, index) in clients"
                        >{{option.name + ' ' + option.user.telephone}}</Option>
                    </Select>
                </div>
            </i-col> -->
            <i-col class="c-ticket__row" span="6">
                <span class="c-ticket__label">所在城市</span>
                <div class="c-ticket__item">
                    <city-code-selector v-model="param.city"></city-code-selector>
                </div>
            </i-col>
            <i-col class="c-ticket__row" span="8">
                <span class="c-ticket__label">创建时间</span>
                <div class="c-ticket__item">
                    <DatePicker class="width-100p" format="yyyy-MM-dd" type="datetimerange" v-model="param.time"></DatePicker>
                </div>
            </i-col>
            <i-col class="c-ticket__row" span="8">
                <span class="c-ticket__label c-ticket__label--width">预约上门时间</span>
                <div class="c-ticket__item">
                    <DatePicker class="width-100p" format="yyyy-MM-dd" type="datetimerange" v-model="param.appointment_time"></DatePicker>
                </div>
            </i-col>
        </Row>

        <Row :gutter="30" class="margin-bottom-10" type="flex">
            <i-col class="c-ticket__row" span="6">
                <span class="c-ticket__label">工单状态</span>
                <div class="c-ticket__item">
                    <Select class="width-100p" multiple filterable v-model="param.state">
                        <Option :key="key" :value="+key" v-for="(value, key) in states">{{value}}</Option>
                    </Select>
                </div>
            </i-col>
            <i-col class="c-ticket__row" span="8" v-if="type === '1'">
                <span class="c-ticket__label">设备类型</span>
                <div class="c-ticket__item">
                    <device-type-selector v-model="param.device_type"></device-type-selector>
                </div>
            </i-col>
            <i-col class="c-ticket__row" span="8" v-else>
                <span class="c-ticket__label">工单紧急度</span>
                <div class="c-ticket__item">
                    <Select class="width-100p" clearable v-model="param.respond_hour">
                        <Option :key="index" :value="option.id" v-for="(option,index) in respondHours">{{option.name}}</Option>
                    </Select>
                </div>
            </i-col>
            <i-col class="c-ticket__row" span="8">
                <i-input @keydown.enter.native="handleSearch" v-model.trim="param.keyword">
                    <Select slot="prepend" style="width: 100px" v-model="param.key">
                        <Option :key="index" :value="option.value" v-for="(option,index) in searchKeys">{{option.label}}</Option>
                    </Select>
                </i-input>
            </i-col>
            <i-button @click="handleSearch" style="width: 70px" type="primary">搜索</i-button>

        </Row>
    </div>
</template>

<script>
import debounce from 'lodash/debounce'
import { http, api } from '@/libs/http'
import util from '@/libs/util'
import { TicketState } from '@/libs/const'
import { startOfDay, endOfDay } from '@/libs/date'
import deviceTypeSelector from './device-type-selector'
import cityCodeSelector from '@/components/city-code-selector'

export default {
  name: 'ticket-param-selector',
  components: {
    deviceTypeSelector,
    cityCodeSelector
  },
  props: {
    model: {
      required: true
    },
    type: String
  },
  computed: {
    states () {
      return TicketState[this.type]
    },
    cities () {
      return this.$store.state.ticket.allCities
    }
  },
  watch: {
    param: {
      deep: true,
      handler () {
        const { key, keyword, time, appointment_time, ...rest } = this.param
        const data = { ...rest }

        if (appointment_time.length > 0) {
          data.appointment_start_time = startOfDay(appointment_time[0])
          data.appointment_end_time = endOfDay(appointment_time[1])
        }
        if (time.length > 0) {
          data.start_time = startOfDay(time[0])
          data.end_time = endOfDay(time[1])
        }
        // 导出显示项目
        if (rest.city) data.cityName = this.cities.find(city => city.region_code === rest.city).name
        if (rest.client) data.clientName = this.clients.find(client => client.id === rest.client).name
        if (rest.implementer) data.implementerName = this.implementers.find(i => i.id === rest.implementer).name
        if (key && keyword) data[key] = keyword
        this.$emit('update:model', util.cleanObj(data))
      }
    }
  },
  data () {
    return {
      swtichStatus: false,
      loadingClients: false,
      // cities: [],
      clients: [],
      implementers: [],
      searchKeys: [
        { label: '工单编号', value: 'sn' },
        { label: '房源编号', value: 'home_name' },
        { label: '房源地址', value: 'address' },
        { label: '小区名称', value: 'block' },
        { label: '下单人', value: 'name' },
        { label: '下单人电话', value: 'phone' }
      ],
      ticketTags: [
        {
          label: '延期工单',
          value: 1
        },
        {
          label: '改约工单',
          value: 2
        },
        {
          label: '签到异常',
          value: 3
        },
        {
          label: '签到正常',
          value: 4
        }
      ],
      param: {
        key: 'sn',
        state: [],
        city: '',
        client: '',
        keyword: '',
        device_type: [],
        implementer: '',
        respond_hour: '',
        appointment_time: [],
        time: [],
        tags: []
      },
      // deviceType: [
      //     { id: 1, name: '仅装网关' },
      //     { id: 2, name: '有网关门锁' },
      //     { id: 3, name: '电表' },
      //     { id: 4, name: '无网关门锁' },
      //     { id: 6, name: '冷水表' },
      //     { id: 7, name: '热水表' }
      // ],
      respondHours: [{ id: 3, name: '3小时' }, { id: 24, name: '24小时' }]
    }
  },
  methods: {
    checkKeywordInclude (keyword) {
      return this.clients.length && this.clients.find(client => keyword.includes(client.user.telephone))
    },
    checkInstallInclude (keyword) {
      return this.implementers.length && this.implementers.find(i => keyword.includes(i.telephone))
    },
    handleSearchClients: debounce(function (keyword) {
      this.searchClients(keyword)
    }, 300),
    async searchClients (keyword) {
      if (keyword) {
        if (this.checkKeywordInclude(keyword)) return
        const params = {
          limit: 20,
          offset: 0,
          keyword
        }
        this.loadingClients = true
        const res = await http.fetch(this, api.ticket_clients_list, null, params)
        if (res && res.length > 0) this.clients = res
        this.loadingClients = false
      }
    },
    handleSearchImplementers: debounce(function (keyword) {
      this.searchImplementers(keyword)
    }, 300),
    async searchImplementers (keyword) {
      if (keyword) {
        if (this.checkInstallInclude(keyword)) return
        const params = {
          limit: 20,
          offset: 0,
          role_id: this.roleType,
          keyword
        }
        this.loadingClients = true
        const res = await http.fetch(this, api.manager_list, null, params).then(res => res.rows)
        if (res && res.length > 0) this.implementers = res
        this.loadingClients = false
      }
    },
    handleSwitch: debounce(
      function () {
        this.switch()
      },
      300,
      { leading: true }
    ),
    switch () {
      this.swtichStatus = !this.swtichStatus
      if (!this.swtichStatus) {
        this.param.start_time = ''
        this.param.end_time = ''
        this.param.implementer = ''
      }
    },
    handleSearch: debounce(
      function () {
        this.search()
      },
      300,
      { leading: true }
    ),
    search () {
      this.$emit('search')
    }
  }
}
</script>

<style lang="less" scoped>
.switch-icon {
    transition: transform 0.3s linear;
    transform-origin: center center;
}
.icon-up {
    transform: rotate(180deg);
}
.c-ticket {
    &__search {
        padding: 20px;
        background-color: #efeff1;
        border-bottom: 1px solid #ddd;
    }
    &__row {
        display: flex;
        align-items: center;
    }

    &__label {
        margin-right: 5px;
    }

    &__item {
        flex: 1;
    }

    &__label--width {
        width: 84px;
    }
}
</style>